<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
    <head>
        <title>TODO supply a title</title>
    </head>
    <ui:composition>


        <!-- Notification box starts -->
        <div class="slide-box">

            <!-- Notification box head -->
            <div class="slide-box-head bred">
                <!-- Title -->
                <div class="pull-left">Notification Box</div>          
                <!-- Icon -->
                <div class="slide-icons pull-right">
                    <a href="#" class="sminimize"><i class="icon-chevron-down"></i></a> 
                    <a href="#" class="sclose"><i class="icon-remove"></i></a>
                </div>
                <div class="clearfix"></div>
            </div>

            <div class="slide-content">

                <!-- It is default bootstrap nav tabs. See official bootstrap doc for doubts -->
                <ul class="nav nav-tabs">
                    <!-- Tab links -->
                    <li class="active"><a href="#tab1" data-toggle="tab"><i class="icon-bar-chart"></i></a></li>
                    <li><a href="#tab2" data-toggle="tab"><i class="icon-phone"></i></a></li>
                    <li><a href="#tab3" data-toggle="tab"><i class="icon-comments"></i></a></li>
                </ul>

                <!-- Tab content -->

                <div class="tab-content">

                    <div class="tab-pane active" id="tab1">

                        <!-- Graph #1 -->
                        <div class="slide-data">
                            <div class="slide-data-text">Today Earnings</div>
                            <div class="slide-data-result">$5,0000 <i class="icon-arrow-up red"></i> </div>
                            <div class="clearfix"></div>
                            <hr />
                            <span id="todayspark4" class="spark"></span>
                        </div>

                        <!-- Graph #2 -->
                        <div class="slide-data">
                            <div class="slide-data-text">Yesterday Earnings</div>
                            <div class="slide-data-result">$4,6000 <i class="icon-arrow-down green"></i> </div>
                            <div class="clearfix"></div>
                            <hr />
                            <span id="todayspark5" class="spark"></span>
                        </div>                

                    </div>

                    <div class="tab-pane" id="tab2">
                        <h5>Have some content here.</h5>
                        <p>Aliquam dui libero, pharetra nec venenatis in, scelerisque quis odio. In hac habitasse platea dictumst. Etiam porta placerat turpis, eget fermentum neque egestas at. Vestibulum ullamcorper, augue a sollicitudin vestibulum, orci purus semper felis, lobortis consequat nisi nunc eu enim. </p>
                    </div>

                    <div class="tab-pane" id="tab3">
                        <h5>Have some content here.</h5>
                        <p>Aliquam dui libero, pharetra nec venenatis in, scelerisque quis odio. In hac habitasse platea dictumst. Etiam porta placerat turpis, eget fermentum neque egestas at. Vestibulum ullamcorper, augue a sollicitudin vestibulum, orci purus semper felis, lobortis consequat nisi nunc eu enim.</p>
                    </div>              

                </div>

            </div>

        </div>

        <!-- Notification box ends -->   


    </ui:composition>
</html>
